<template>
  <div class="container">
    <div class="left-content">
      <a-menu
          v-model:selectedKeys="selectedKeys"
          mode="vertical"
      >
        <a-menu-item v-for="(item, index) in roleList" :key="item.name">
          <router-link :to="{name: item.name}">{{ item.meta.title }}</router-link>
        </a-menu-item>
      </a-menu>
    </div>
    <div class="right-content">
      <router-view :key="route.fullPath"/>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent, reactive, toRefs} from 'vue'
import {Tabs} from 'ant-design-vue'
import SplitPanel from '@/components/split-panel/index.vue'
import {useRoute, useRouter, RouteRecordRaw} from "vue-router"

export default defineComponent({
  name: "role",
  components: {SplitPanel, [Tabs.name]: Tabs, [Tabs.TabPane.name]: Tabs.TabPane},
  setup() {

    const route = useRoute()
    const router = useRouter()
    const roleList = router.getRoutes().find(item => item.name == 'role')?.children as RouteRecordRaw[]
    console.log(router.getRoutes(), '简介')

    const state = reactive({
      selectedKeys: [route.name],
      policyTypes: {}
    })
    if (route.name == 'role') {
      const childrenName = roleList[0].name
      router.replace({name: childrenName})
      state.selectedKeys = [childrenName]
    }
    const tabChange = (key) => {
      router.push(key)
    }

    return {
      ...toRefs(state),
      route,
      roleList,
      tabChange
    }
  }
})
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  height: 100%;

  .left-content {
    width: 256px;
    text-align: center;
    .ant-menu {
      height: 100%;
    }
  }
  .right-content {
    flex: auto;
    overflow: auto;
  }
}
</style>
